<template>
<!-- <div> -->
  <el-card>
    
    <div slot="header" class="clearfix">
    <span>城市列表</span>    
  </div>
    <el-table :data="cityData" border style="width: 100%"  v-loading="loading" :header-cell-style="{background:'#F3F4F7',color:'#555',fontSize:'16px'}">
      <el-table-column fixed prop="cityId" label="城市Id" width="" align="center"></el-table-column>
      <el-table-column prop="name" label="城市名称" width align="center"></el-table-column>
      <el-table-column prop="pinyin" label="城市拼音" width align="center"></el-table-column>
      <el-table-column prop="isHot" label="热门" width :formatter="formHot" align="center"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100" align="center">
        <template slot-scope="scope">       
          <el-button type="danger" icon="el-icon-delete" circle @click="handleClick(scope)"></el-button>
          <el-button type="primary" icon="el-icon-edit" circle @click="edit(scope)"></el-button>
          <!-- <router-link :to="`/city/edit/${scope.row.cityId}`">编辑</router-link> -->
        </template>
      </el-table-column>
    </el-table>
    <div class="pages">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="changePage"
        :hide-on-single-page="value"
      ></el-pagination>
    </div>
  </el-card>
  <!-- </div> -->
</template>

<script>
export default {
  methods: {

    //编辑的方法
    edit(scope){
      let cityId = scope.row.cityId
console.log("cityId",cityId)
this.$router.push(`/city/edit/${cityId}`)
console.log("111",scope)
    },
    //表格的操作方法
    handleClick(scope) {
      // console.log('眼删除数据内容',scope.row.name);

     this.$confirm(`您将永久删除 ${scope.row.name},是否继续?`, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            this.$message({
                 type: 'success',
                 message: '删除成功!'
          });
           const data={
        cityId:scope.row.cityId
      }
           const url ='/city/delById'
          this.$axios.post(url,data).then(res=>{        
             
            })
         

          
      this.cityData.splice(scope.$index,1);
     
     


        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });


    



    },
    //分页方法
    changePage(pageNum) {
      // console.log("current-page",pageNum)
      this.getData(pageNum)
    },

    
    // 获取数据的方法
    getData(pageNum) {
      const url = "/city/getList?pageNum="+pageNum;
     this.loading=true
      this.$axios
        .get(url)
        .then(res => {
          // console.log("res", res);
          this.cityData=res.cities
          // console.log("cityData",this.cityData)
          this.total=res.total
          // console.log("this.total",this.total)
            this.loading=false
        })
        .catch(err => {
          console.log("err", err);
          this.loading=false
        });
    },
     formHot(row, column, cellValue, index) {
       console.log("row:",row)
      //  console.log("column:",column)
      //  console.log("cellValue:",cellValue)
      //  console.log("index:",index)
       this.index=index
       return cellValue?"是":"否"
      
      }
  },
  created() {
    this.getData();
  },

  data() {
    return {
      cityData: [],
      total:0,
      cityData:[],
      pageNum:1,
      index:0,
      loading:false,
      value:true
      
    };
  }
};
</script>
<style lang="less" scoped>
.clearfix{
  font-size: 22px;
  font-weight: 900;
}
.pages {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.el-button.is-circle {
    border-radius: 50%;
    padding: 8px;
}

</style>